<!--
 * @Author: your name
 * @Date: 2020-05-19 17:59:08
 * @LastEditTime: 2021-10-21 11:37:55
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /gatt/src/modules/front/pages/GattCat/index.vue
 -->
<template>
  <div class="box">
    <div class="box-color">
      <circle-info :data="colors"></circle-info>
    </div>
    <div class="box-wrap">
      <div class="box-cnt"
           v-loading="loading">
        <no-data v-show="nodataShow0"></no-data>
        <gatt-view ref="gattView0"
                   v-show="!nodataShow0"
                   :uuId="new Date().getTime()"
                   @handleCommand="handleCommand"></gatt-view>
      </div>
      <div class="box-cnt"
           v-loading="loading">
        <no-data v-show="nodataShow1"></no-data>
        <gatt-view ref="gattView1"
                   v-show="!nodataShow1"
                   :uuId="new Date().getTime() + 100"
                   @handleCommand="handleCommand"></gatt-view>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable camelcase */
import GattView from '@front/components/GattView'
import * as request from '@front/data/apis/GattCat'
import CircleInfo from '@front/components/CircleInfo'
export default {
  name: 'GattTablePage',
  components: {
    GattView,
    CircleInfo
  },
  watch: {
    '$route' (to, from) {
      this.form.id = this.$route.query.id ? this.$route.query.id : ''
      this.init()
    }
  },
  data () {
    return {
      form: {
        id: this.$route.query.id ? this.$route.query.id : ''
      },
      loading: false,
      colors: [],
      nodataShow0: true,
      nodataShow1: true,
      data0: {
        // split-pane 分割偏移百分比值
        offset: 0.2,
        // 显示的刻度(时间刻度 1:日,2周,3月,4季,5年,默认是1)
        timeMode: 1,
        // 最小的开始时间
        // startTime: new Date('2020/01/28').getTime(),
        startTime: new Date(2020, 0, 28).getTime(),
        // 最大的结束时间
        // endTime: new Date('2022/01/03').getTime(),
        endTime: new Date(2022, 0, 3).getTime(),
        // 表格头部的属性值(必须要设置),params设置的字段在表头设置的字段里存在才会在浮窗显示
        headData: {},
        // headData里的属性必须要和ganteData里params里的属性相对应,属性名要一样
        gattData: []
      },
      data1: {
        // split-pane 分割偏移百分比值
        offset: 0.2,
        // 显示的刻度(时间刻度 1:日,2周,3月,4季,5年,默认是1)
        timeMode: 1,
        // 最小的开始时间
        // startTime: new Date('2020/01/28').getTime(),
        startTime: new Date(2020, 0, 28).getTime(),
        // 最大的结束时间
        // endTime: new Date('2022/01/03').getTime(),
        endTime: new Date(2022, 0, 3).getTime(),
        // 表格头部的属性值(必须要设置),params设置的字段在表头设置的字段里存在才会在浮窗显示
        headData: {},
        // headData里的属性必须要和ganteData里params里的属性相对应,属性名要一样
        gattData: []
      },
      data: []
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.getGattTableDataFn()
    },
    getGattTableDataFn () {
      this.loading = true
      request.getGattTableData(this.form).then(res => {
        const d = res.data && res.data.data ? res.data.data : []
        if (d.length) {
          this.data = d
          this.colors = res.data.colors
          this.setDataInit(d)
        } else {
          this.nodataShow0 = true
          this.nodataShow1 = true
        }
      }).catch(res => {
        this.$notify.error({
          title: '错误',
          message: (res.data && res.data.mesg) || res.mesg || (res.data && res.data.msg) || '接口数据返回格式错误！'
        })
      })
        .finally(() => {
          this.loading = false
        })
    },
    setDataInit (d) {
      d.forEach((item, index) => {
        this['nodataShow' + index] = false
        this['data' + index].timeMode = item.timeMode
        this['data' + index].offset = item.offset
        this['data' + index].startTime = item.startTime
        this['data' + index].endTime = item.endTime
        this['data' + index].headData = item.headData
        this['data' + index].gattData = item.ganttData
        this['data' + index].gattData.length && this.$refs['gattView' + index].init({
          timeMode: this['data' + index].timeMode,
          offset: this['data' + index].offset,
          startTime: this['data' + index].startTime,
          endTime: this['data' + index].endTime,
          headData: this['data' + index].headData,
          gattData: this['data' + index].gattData
        })
      })
    },
    handleClick (d) {
      // console.log(d)
      // debugger
    },
    change (d) {
      // console.log(d)
      // debugger
    },
    handleCommand (command) {
      if (this.data.length) {
        this.data.forEach(item => {
          item.timeMode = ~~command
        })
        this.setDataInit(this.data)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.box {
  width: 100%;
  height: 100%;
  overflow: hidden;

  &-color {
    height: 40px;
    padding: 12px 0 0 10px;
  }

  &-wrap {
    height: calc(100% - 40px);
    overflow: hidden;

    .box-cnt {
      width: 100%;
      height: 50%;
      float: left;
    }
  }
}

/*
 * 强制横屏显示：通过竖屏时旋转解决横屏问题
 *
 */
@media screen and  (orientation:  portrait){
  .box {
    -webkit-transform:rotate(90deg);
    -webkit-transform-origin:0% 0%;/*1.重置旋转中心*/
    -moz-transform: rotate(90deg);
    -moz-transform-origin:0% 0%;
    -ms-transform: rotate(90deg);
    -ms-transform-origin:0% 0%;
    transform: rotate(90deg);
    transform-origin:0% 0%;
    width: 100vh;/*2.利用 vh 重置 ‘宽度’ */
    height: 100vw;/* 3.利用 vw 重置 ‘高度’ */
    top: 0;
    left: 100vw;/* 4.旋转后页面超出屏幕，重置页面定位位置 */
    position: relative;
  }
}
</style>
